<template>
   <div>
      <van-nav-bar title="课程">
         <template #right>
            <van-icon name="search" size="18" />
         </template>
      </van-nav-bar>
      <van-dropdown-menu>
         <van-dropdown-item v-model="value1" :options="option1" />
         <van-dropdown-item v-model="value2" :options="option2" />
         <van-dropdown-item v-model="value3" :options="option3" />
      </van-dropdown-menu>
      <div class="js">
            <div class="x"><img src="https://img01.yzcdn.cn/vant/ipad.jpeg" alt=""></div>
            <div id="d">
                <p>谢文</p>
                <p>全栈开发 <span>免费</span></p>
            </div>
        </div>
        <div class="js">
            <div class="x"><img src="https://img01.yzcdn.cn/vant/ipad.jpeg" alt=""></div>
            <div id="d">
                <p>谢文</p>
                <p>全栈开发 <span>免费</span></p>
            </div>
        </div>
        <div class="js">
            <div class="x"><img src="https://img01.yzcdn.cn/vant/ipad.jpeg" alt=""></div>
            <div id="d">
                <p>谢文</p>
                <p>全栈开发 <span>免费</span></p>
            </div>
        </div>
        <div class="js">
            <div class="x"><img src="https://img01.yzcdn.cn/vant/ipad.jpeg" alt=""></div>
            <div id="d">
                <p>谢文</p>
                <p>全栈开发 <span>免费</span></p>
            </div>
        </div>
   </div>
</template>
    
<script>

export default {
   // 变量 
   data() {
      return {

         value1: 0,
         value2: 'a',
         value3: '4',
         option1: [
            { text: '分类', value: 0 },
            { text: '新款商品', value: 1 },
            { text: '活动商品', value: 2 },
         ],
         option2: [
            { text: '默认排序', value: 'a' },
            { text: '好评排序', value: 'b' },
            { text: '销量排序', value: 'c' },
         ],
         option3: [
            { text: '筛选', value: '4' },
            { text: '111', value: '5' },
            { text: '2222', value: '6' },
         ],
      }
   },
   // 事件
   methods: {},
   // 计算属性
   computed: {},
   // 监听器
   watch: {},
   // 过滤器
   filters: {},
   // 自定义指令
   directives: {},
   mounted() { },
}
</script>
<style scoped>
.js{
    width: 100%;
    height: 200px;
    display: flex;
    background-color: #fff;
    margin-top: 10px;
    border-radius: 10px;

}
.js img{
width: 40px; 
height: 40px;
}
#d{
   width: 100%;
   height: 20px;
}
p{
    text-align: left;
    width: 100%;
}
span{
   font-size: 20px;
   color: greenyellow;
   float:right;
   margin-right: 10px;
}
</style>